<template>
	<view class="main">
		<delVue :Visible="isshow" @isModal="modal" @goStay="stay" :oneText="one" :twoText="two" :threeText="three"
			:fourText="four" />
		<view class="title">
			<alltitleVue :title="title" :url="url" />
		</view>
		<view class="public">
			<view class="public-tit">
				<view class="">
					基础信息
				</view>

			</view>
			<view class="container">
				<!-- 姓名 -->
				<view class="form-item">
					<view class="input-box">
						<text class="label">姓名</text>
						<input v-model="add.name" placeholder="请输入姓名" @input="validateName" @blur="validateName"
							class="input" />
					</view>
					<view class="error-box">
					</view>
				</view>
				<!-- 身份证号 -->
				<view class="form-item">
					<view class="input-box">
						<text class="label">身份证号</text>
						<input v-model="add.idCard" placeholder="请输入身份证号" @blur="validateIdCard" class="input" />
					</view>
					<view class="error-box">

					</view>


				</view>

				<!-- 性别 -->
				<view class="form-item item-box">
					<text class="label">性别</text>
					<view class="gender" @click="noInput">
						<text :class="{'highlight': add.gender === '男'}" class="gender-label">男</text>
						<text :class="{'highlight': add.gender === '女'}" class="gender-label">女</text>
					</view>
				</view>

				<!-- 电话号码 -->
				<view class="form-item">
					<view class="input-box">
						<text class="label">电话号码</text>
						<input v-model="add.mobile" placeholder="请输入电话号码" @blur="validatePhone" class="input" />
					</view>
					<view class="error-box">

					</view>
				</view>


			</view>

		</view>
		<view class="btn-box" :style="{ 'background-image': `url(${btnBg})` }">
			<!-- 提交按钮 -->
			<view v-if="cardid==''" @click="submitForm" class="submit-btn">添加就诊卡</view>
			<view v-else class="btn-xiu">
				<!-- <view class="" @click="deleteItem(item)">
					删除
				</view> -->
				<view class="" @click="edit">
					修改
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import config from "../../utils/config";
	import delVue from '../../components/del.vue'
	import {
		addPatient,
		patientDelete
	} from "@/service/api.js";
	import {
		toast,
		getStore,
		getDate,
		validateIdCard
	} from "@/utils";
	export default {
		components: {
			delVue
		},
		data() {
			return {
				btnBg: config.ossHost + "2025/01/07/bc4c90bd3a6e4a379e1081450cfad9c0.png",
				information:false,
				isshow: false,
				one: "再想想",
				two: "确定删除",
				three: "确定要删除此就诊人吗？",
				four: "删除提示",
				title: "就诊卡详情",
				add: {
					name: '',
					iscard: 0,
					idCard: '',
					gender: '', // 自动识别的性别
					mobile: '',
					memberId:""
				},
				nameError: '',
				idCardError: '',
				phoneError: '',
				cardid: "",
				

			}
		},
		onLoad(options) {
			if (options.item) {
				this.cardid = JSON.parse(options.item).id;
				this.cardinfo =JSON.parse(options.item);
				this.add.name = this.cardinfo.name;
				this.add.idCard = this.cardinfo.idCard;
				this.add.mobile = this.cardinfo.mobile;
				// 自动识别性别
				this.autoIdentifyGender();
			}
			if(options.information){
				this.information=options.information
			}

		},
		methods: {
			stay(item) {
				this.isshow = item;
			
				this.deleteHandle();
			
			},
			edit() {
				uni.navigateTo({
					url: "/My/editCard/index?cardinfo=" + JSON.stringify(this.cardinfo) 
				})
			},





			// 姓名验证
			validateName() {
				if (!this.add.name) {
					this.nameError = '姓名不能为空';
					toast(this.nameError)
				} else {
					this.nameError = '';
				}
			},

			// 身份证验证
			validateIdCard() {
				const idCardPattern = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}[0-9Xx]$/;
				if (!this.add.idCard) {
					this.idCardError = '身份证号不能为空';
					toast(this.idCardError)
				} else if (!idCardPattern.test(this.add.idCard)) {
					this.idCardError = '身份证号格式不正确';
					toast(this.idCardError)
				} else {
					this.idCardError = '';
					this.autoIdentifyGender(); // 身份证号验证通过后自动识别性别
				}
			},

			// 性别自动识别
			autoIdentifyGender() {
				if (this.add.idCard.length === 18) {
					const genderCode = parseInt(this.add.idCard[16]); // 取身份证号的第17位
					this.add.gender = genderCode % 2 === 0 ? '女' : '男'; // 偶数为女，奇数为男
				}
			},

			// 电话号码验证
			validatePhone() {
				const phonePattern = /^1[3-9]\d{9}$/;
				if (!this.add.mobile) {
					this.phoneError = '电话号码不能为空';
					toast(this.phoneError)
				} else if (!phonePattern.test(this.add.mobile)) {
					this.phoneError = '电话号码格式不正确';
					toast(this.phoneError)
				} else {
					this.phoneError = '';
				}
			},
			noInput() {
				toast("该信息可根据身份证自动计算，无需填写");
			},
			deleteItem() {
				
				this.isshow = true
			
			},
			async deleteHandle(item) {
				const res = await patientDelete(this.cardid);
				if (res.code==200) {
					toast("删除成功");
				}
			},
			// 提交表单
			async submitForm() {

				this.validateName();
				if (this.nameError != '') {
					return
				}
				this.validateIdCard();
				if (this.idCardError != '') {
					return
				}
				this.validatePhone();

				// 如果表单验证通过
				if (!this.nameError && !this.idCardError && !this.phoneError) {
					this.info = JSON.parse(getStore("info")) || {};
					this.add.memberId=this.info.id;
					
					let res = await addPatient(this.add);
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						if(this.information){
							setTimeout(() => {
								// uni.navigateTo({
								// 	url: "/integration/information/index"
								// })
								uni.navigateBack({
									delta: 1,
								});
							},500)
						}else{
							setTimeout(() => {
								// uni.navigateTo({
								// 	url: "/My/idCard/index"
								// })
								uni.navigateBack({
									delta: 1,
								});
							},500)
						}
						
					}


				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		background: #fff;
	}
	.main {
		height: 100vh;
		background: #F5F3F0;
	}

	.public {
		padding: 24rpx;
		margin: 0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 32rpx;

		.public-tit {
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 24rpx;

			view:last-child {
				// color: #673A34;
			}
		}

		.container {

			// padding: 20rpx;
			.form-item {
				border-bottom: 1rpx solid #E6E6E6;

				.input-box {
					display: flex;
					align-items: center;
				}

				margin-bottom: 24rpx;
			}
			.form-item:last-child{
				border: none;
				margin-bottom: 0;
			}

			.label {
				display: inline-block;
				width: 100rpx;
				font-size: 24rpx;
				margin-right: 48rpx;
			}

			.input {

				font-size: 24rpx;


			}
		}

		.error-box {
			height: 24rpx;
			display: flex;
		}

		.item-box {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			padding-bottom: 24rpx;

			.gender {
				display: flex;
				align-items: center;
			}

			.gender-label {
				display: inline-block;
				width: 48rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				margin-right: 15rpx;
				background: #F8F8F8;
				border-radius: 50%;

			}

			.highlight {
				font-weight: bold;
				background: #CCA566;
				color: #fff;

			}
		}


	}

	.btn-box {
		position: fixed;
		bottom: 0;
		background: #fff;
		// padding-top: 24rpx;
		width: 100%;
		
		height: 170rpx;


		.submit-btn {
			width: 702rpx;
			margin: auto;
			margin-top: 20rpx;
			height: 86rpx;
			line-height: 86rpx;
			background: #CCA566;
			border-radius: 8rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
			// border-radius: 16rpx;
		}

		.btn-xiu {
			display: flex;
			justify-content: space-between;
			width: 702rpx;
			padding-top: 20rpx;
			margin: auto;

			view {
				// width: 339rpx;
				width: 100%;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #CCA566;
				background: #fff;
				color: #CCA566;
			}

			view {
				background: #CCA566;
				color: #fff;
			}
		}

	}
	.form-item:last-child {
		
		border: none;
	}
</style>